<template>
  <div class="sign-normal-setting">
    <el-form ref="settingform" :model="settingform" label-width="120px">
      <el-form-item label="签到风格：">
        <img class="sign-style-img" :src="settingform.signStyle || defaultSignBg" />
        <el-button class="sign-style-btn" type="text" @click="picLibraryVisibly = true">风格库</el-button>
      </el-form-item>
      <el-form-item label="提示语：">
        <el-input v-model="settingform.signMessage"></el-input>
      </el-form-item>
      <el-form-item label="签到填写内容：">
        <el-form ref="formContent">
          <el-row v-for="(formItem, formIndex) in settingform.formContent" :key="formIndex">
            <div v-if="formItem.type == 'name'">
              <el-col :span="4" class="form-content-col">
                <el-switch
                  style="display: block"
                  v-model="formItem.isChecked"
                  active-color="#1994fa"
                  inactive-color="#ff4949"
                  active-text="姓名">
                </el-switch>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="formItem.isRequired">必填</el-checkbox>
              </el-col>
            </div>
            <div v-if="formItem.type == 'tel'">
              <el-col :span="4" class="form-content-col">
                <el-switch
                  style="display: block"
                  v-model="formItem.isChecked"
                  active-color="#1994fa"
                  inactive-color="#ff4949"
                  active-text="手机号">
                </el-switch>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="formItem.isRequired">必填</el-checkbox>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="formItem.isVerify">验证正确性</el-checkbox>
              </el-col>
            </div>
            <div v-if="formItem.type == 'mail'">
              <el-col :span="4" class="form-content-col">
                <el-switch
                  style="display: block"
                  v-model="formItem.isChecked"
                  active-color="#1994fa"
                  inactive-color="#ff4949"
                  active-text="邮箱">
                </el-switch>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="formItem.isRequired">必填</el-checkbox>
              </el-col>
              <el-col :span="4">
                <el-checkbox v-model="formItem.isVerify">验证正确性</el-checkbox>
              </el-col>
            </div>
            <div v-if="formItem.type == 'normal'" class="normal-form-item">
              <el-col :span="1">
                <i class="el-icon-circle-close remove-list-item" @click="removeListItem(formIndex)"></i>
              </el-col>
              <el-col :span="8">
                <el-form-item v-bind:label="(formIndex - 2) + '.标题'" label-width="60px">
                  <el-input v-model="formItem.title"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4" :offset="1">
                <el-checkbox v-model="formItem.isRequired">必填</el-checkbox>
              </el-col>
              <el-col :span="10">
                <el-checkbox v-model="formItem.isDropdown">是否选项</el-checkbox>
                <el-button type="text" @click="openSettingModal(formItem, formIndex)">配置选项</el-button>
                <i v-if="formItem.dropdownList && formItem.dropdownList.length > 0" class="el-icon-circle-check"></i>
                <i v-else class="el-icon-remove"></i>
              </el-col>
            </div>
          </el-row>
          <el-form-item class="add-form-item">
            <el-button type="primary" @click="addFormItem" round>添加填写内容</el-button>
          </el-form-item>
        </el-form>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" :plain="true" size="medium" @click="reset">恢复默认</el-button>
        <el-button type="primary" size="medium" @click="onSubmit">保存</el-button>
      </el-form-item> -->
    </el-form>
    <!-- 配置下拉菜单选项模态框 -->
    <el-dialog
      class="drop-dialog"
      title="选项配置"
      :visible.sync="dialogVisible"
      width="30%">
      <span slot="footer" class="dialog-footer">
        <span class="err-msg" v-if="errorMsg">{{errorMsg}}</span>
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDropdown">确 定</el-button>
      </span>
      <div class="content">
          <el-button type="primary" size="small">导入</el-button>
          <el-button type="text" size="small">导入模板下载</el-button>
          <el-row v-for="(item, index) in dropdownList" :key="index">
            <el-col :span="4" class="title">选项{{index + 1}}</el-col>
            <el-col :span="14" class="input-col">
              <el-input v-model="item.name"></el-input>
            </el-col>
            <el-col :span="4" class="operate-col">
              <i class="el-icon-circle-plus-outline" @click="addDropItem(index)"></i>
              <i v-if="dropdownList.length > 1" class="el-icon-remove-outline" @click="removeDropItem(index)"></i>
            </el-col>
          </el-row>
      </div>
    </el-dialog>
    <el-dialog
            top="40px"
            :visible="picLibraryVisibly"
            width="800px"
            title="图片库"
            @close="picLibraryVisibly = false"
            append-to-body
            custom-class="library_dialog definedModal"
        >
            <imagesLibrary @selected="selectCurrentImg" @close="picLibraryVisibly = false"></imagesLibrary>
        </el-dialog>
  </div>
</template>

<script>
  import avatarImg from '../../../../assets/imgs/fj.jpg'
import imagesLibrary from '../baseSetting/library/imagesLibrary';

  export default {
    name: 'signNormalSetting',
    components: {
      imagesLibrary,
    },
    data () {
      return {
        currentScene: {},
        picLibraryVisibly:false,
        errorMsg: null,
        currentFormItemIndex: null,
        dropdownList:[],
        dialogVisible: false,
        defaultSignBg: "http://www.office2.cn/staticmb/miniprogram_assets/images/bg/default_sign_bg.png",
        defaultSettingform: {
          signStyle: this.defaultSignBg,
          signMessage: "欢迎参加XXXXX会议",
          formContent: [
            {type: "name", title: "姓名"},
            {type: "tel", title: "手机号"},
            {type: "mail", title: "邮箱"}
          ]
        },
        settingform: {
          signStyle: avatarImg,
          signMessage: "欢迎参加XXXXX会议",
          formContent: [
            {type: "name", title: "姓名"},
            {type: "tel", title: "手机号"},
            {type: "mail", title: "邮箱"}
          ]
        },
      }
    },

    created() {
      // 获取配置
      this.$api.post('/sceneCfg/findCfgBySceneId', {
        sceneid: this.$route.query.sceneId,
        cfgtype: 2
      }, response => {
        this.$message({
          message: '查询成功',
          type: 'success'
        });
        if (response) {
          this.settingform = JSON.parse(response);
        } else {
          this.settingform = this.defaultSettingform;
        }
      }, fal => {
        this.$message.error(fal);
      });

      // 获取当前场景对象
      let sceneList = JSON.parse(sessionStorage.getItem("sceneList"));
      let currentScene = sceneList.filter(item => {
        return item.sceneId == this.$route.query.sceneId;
      })[0];
      if (currentScene) {
        this.currentScene = currentScene;
        this.defaultSettingform.signMessage = `欢迎参加${currentScene.name}`;
      }
    },

    methods: {
      selectCurrentImg(img){
        this.settingform.signStyle = img.url;
      },
      // 添加填写内容
      addFormItem() {
        let tmp = {
          type: "normal"
        }
        this.settingform.formContent.push(tmp);
      },

      // 删除填写内容项
      removeListItem(index) {
        this.settingform.formContent.splice(index, 1);
      },

      isRepeat(arr) {
        if (arr.length > 3) {
          let hash = {};
          for (let index = 3; index < arr.length; index++) {
            const item = arr[index];
            if (item.title === "姓名" || item.title === "手机号" || item.title === "邮箱") {
              return true;
            } else if (hash[item.title]) {
              return true;
            } else {
              hash[item.title] = true;
            }
          }
        }

        // let hash = {};
        // for (let i in arr) {
        //     if (hash[arr[i]]){
        //         return true; 
        //     }
        //     hash[arr[i]] = true;
        // }
        return false;
      },

      // 提交保存
      onSubmit() {
        // 删除空签到填写内容项
        for (let index = this.settingform.formContent.length - 1; index >= 0; index--) {
          const item = this.settingform.formContent[index];
          if (item.type === "normal" && !item.title) {
            this.settingform.formContent.splice(index, 1);
          }
        }
        // 验证选项名称重复
        if (this.isRepeat(this.settingform.formContent)) {
          return this.$message({
            message: '不能添加重复选项',
            type: 'error'
          });
        }
        this.settingform.formContent.map(item => {
          return item.title;
        })
        
        let param = {
          sceneid: this.$route.query.sceneId,
          cfgjson: this.settingform,
          // 签到类型参数为2
          cfgtype: 2
        }
        console.log(param);
        this.$api.post('/sceneCfg/saveSceneCfg', param, response => {
          this.$message({
            message: '保存成功',
            type: 'success'
          });
        }, fal => {
          this.$message.error(fal);
        });
      },

      // 恢复默认
      reset() {
        this.settingform = this.defaultSettingform;
      },

      // 打开配置选项模态框
      openSettingModal(formItem, formItemIndex) {
        this.dialogVisible = true;
        this.errorMsg = null;
        this.currentFormItemIndex = formItemIndex;
        this.dropdownList = formItem.dropdownList || [{}, {}, {}];
      },

      /** dialog methods */
      // 保存选项配置
      saveDropdown() {
        // 删除空项,验证重复
        let nameObj = {}, hasRepeat = false;
        for (let index = this.dropdownList.length - 1; index >= 0; index--) {
          const item = this.dropdownList[index];
          if (item.name === undefined || item.name === "") {
            this.dropdownList.splice(index, 1);
          } else if (!hasRepeat && nameObj[item.name]) {
            hasRepeat = true;
          } else {
            nameObj[item.name] = true;
          }
        }
        if (hasRepeat) {
          return this.errorMsg = "请不要输入相同选项";
        }

        this.dialogVisible = false;
        this.settingform.formContent[this.currentFormItemIndex].dropdownList = this.dropdownList;
        console.log(this.settingform)
      },

      // 添加dropdown选项
      addDropItem(index) {
        this.dropdownList.splice(index, 0, {})
      },

      // 删除dropdown选项
      removeDropItem(index) {
        this.dropdownList.splice(index, 1);
      }
    }
  };
</script>

<style lang="scss">
  .sign-normal-setting {
    width: 100%;
    height: 100%;

    .el-switch {
      .el-switch__core::before {
        content: "关";
        font-size: 12px;
        color: #fff;
        position: absolute;
        top: -2px;
        right: 5px;
      }
      &.is-checked .el-switch__core::before {
        content: "开";
        left: 5px;
      }
    }

    .sign-style-img {
      width: 90px;
      height: 160px;
      display: inline-block;
    }

    .sign-style-btn {
      vertical-align: top;
    }

    .form-content-col .el-switch {
      padding: 6px 0;
    }

    .add-form-item {
      margin-top: 20px;
    }

    .normal-form-item {
      margin-top: 10px;

      .remove-list-item {
        font-size: 16px;
        cursor: pointer;

        &:hover {
          color: #409EFF;
        }
      }

      .el-form-item__label {
        text-align: left;
      }

      .el-icon-circle-check {
        color: #409EFF;
      }

      .el-icon-remove {
        color: #ff4949;
      }
    }

    .drop-dialog {
      .el-dialog__body {
        padding: 0 20px;
      }

      .err-msg {
        color: #ff4949;
        font-size: 12px;
        margin-right: 20px;
      }

      .content {
        .el-row {
          margin-top: 10px;
        }

        .title {
          line-height: 32px;
        }

        .operate-col {
          line-height: 32px;
          font-size: 16px;
          margin-left: 20px;

          i {
            cursor: pointer;
            &:hover {
              color:#409EFF;
            }
          }
        }
      }
    }
  }
</style>